<template>
    <el-row>
        <el-col :span="8">
            <el-statistic title="用户总数" :value="user" />
        </el-col>
        <el-col :span="8">
            <el-statistic :value="sexRaatio.man">
                <template #title>
                    <div style="display: inline-flex; align-items: center">
                        男女比例
                        <el-icon style="margin-left: 4px" :size="12">
                            <Male />
                        </el-icon>
                    </div>
                </template>
                <template #suffix>/{{sexRaatio.woman}}</template>
            </el-statistic>
        </el-col>
        <el-col :span="8">
            <el-statistic title="订单总数" :value="appointmentNumber" />
        </el-col>
    </el-row>
    <el-divider />
    <el-row>
        <el-col :span="12">
            <div ref="myChart" id="myChart" :style="{ width: '800px', height: '400px' }"></div>
        </el-col>
        <el-col :span="12">
            <div ref="myChart1" id="myChart1" :style="{ width: '700px', height: '400px' }"></div>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useTransition } from '@vueuse/core'
import { ChatLineRound, Male } from '@element-plus/icons-vue'

import { getCurrentInstance, onMounted } from 'vue';
import echartsApi from '@/api/echartsApi';

const source = ref(0)
const outputValue = useTransition(source, {
    duration: 1500,
})
source.value = 172000

const user = ref('0')
const sexRaatio = ref({
    man:'',
    woman:''
})
const appointmentNumber = ref('0')

// 用户数量
const userNumber = () => {
    echartsApi.getUserNumber()
        .then(resp => {
            user.value = resp.data;
        });
}
// 获得男女比例
const getSexRatio = () => {
    echartsApi.getSexRatio()
        .then(resp => {
            sexRaatio.value = resp.data;
        });
}

// 获得订单数量
const getAppointmentNumber = () => {
    echartsApi.getAppointmentNumber()
        .then(resp => {
            appointmentNumber.value = resp.data;
        });
}


// 获取部门图标信息
const getDepartmentInfo = async () => {
    let result = await echartsApi.getDepartmentInfo();
    if (result.code === 10000) {
        const dom = document.getElementById('myChart');
        const myChart = echarts.init(dom); // 初始化echarts实例

        const option = {
            title: {
                text: '部门人员分配',
                subtext: '家电维修',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '家电维修',
                    type: 'pie',
                    radius: '50%',
                    data: result.data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 设置实例参数
        myChart.setOption(option);
    }
}

// 获取配件图表信息
const getPartsInfo = async () => {
    let result = await echartsApi.getPartsInfo();
    if (result.code === 10000) {
        const dom = document.getElementById('myChart1');
        const myChart1 = echarts.init(dom); // 初始化echarts实例

        const option1 = {
            title: {
                text: '配件使用前5',
                subtext: '家电维修',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: result.data.name
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: result.data.number,
                    type: 'bar'
                }
            ]
        };

        // 设置实例参数
        myChart1.setOption(option1);
    }
}

// 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
let internalInstance = getCurrentInstance();
let echarts = internalInstance.appContext.config.globalProperties.$echarts;

onMounted(() => {
    getSexRatio();
    getAppointmentNumber();
    userNumber();
    getDepartmentInfo();
    getPartsInfo();
});


</script>

<style scoped>
.el-col {
    text-align: center;
}
</style>